import { Space } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import { orderApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'

import { brandIdOptions, provinceOptions } from '../constants'

export default defineComponent({
  name: 'DcGoodsManage',
  setup() {
    const cityList = ref([] as any[])
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        formConfig: {
          items: [
            {
              title: '门店名称',
              field: 'name',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入门店名称'
                }
              }
            },
            {
              title: '商品供应商',
              field: 'brandId',
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                props: {
                  placeholder: '全部',
                  allowClear: true
                },
                options: brandIdOptions
              }
            },
            {
              title: '所在位置',
              field: 'province',
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                props: {
                  placeholder: '省',
                  allowClear: true
                },
                events: {
                  change: handleProvinceChange
                },
                options: provinceOptions
              }
            },
            {
              field: 'city',
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                props: {
                  placeholder: '市',
                  allowClear: true
                },
                options: cityList
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columns: [
          {
            title: '门店ID',
            field: 'id',
            minWidth: 100
          },
          {
            title: '门店名称',
            field: 'restaurantName',
            minWidth: 150
          },
          {
            title: '所在省市',
            minWidth: 150,
            slots: {
              default: 'provinceRow'
            }
          },
          {
            title: '详细地址',
            field: 'restaurantAddress',
            minWidth: 200
          },
          {
            title: '门店状态',
            field: 'status',
            minWidth: 150,
            formatter: ({ cellValue }) => {
              if (cellValue == '1') {
                return '休息中'
              } else if (cellValue == '2') {
                return '营业中'
              } else {
                return '无'
              }
            }
          },
          {
            title: '营业时间',
            minWidth: 150,
            slots: {
              default: 'timeRow'
            }
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await orderApi.getRestaurantList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)

    function handleProvinceChange(value) {
      const provinceData = provinceOptions.filter(val => {
        return val.value == value.data.province
      })
      cityList.value = provinceData[0].children ? provinceData[0].children : []
    }

    return {
      tableRef,
      tableConfig
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            provinceRow: ({ row }) => (
              <Space>
                <span>{`${row.provinceName ? row.provinceName : ''}${
                  row.cityName ? row.cityName : ''
                }`}</span>
              </Space>
            ),
            timeRow: ({ row }) => (
              <Space>
                <span>
                  {row.openTime ? `${row.openTime} - ${row.closeTime}` : ''}
                </span>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
